import React from 'react';
import { observer, inject } from 'mobx-react';

import { Table, Divider, Pagination, Icon } from 'antd';

import {List} from 'react-virtualized';

const { Column } = Table;

import './index.scss';

import UserApi from '@service/UserApi';

const tree = [{
    id: '1',
    name: '模板一',
    type: 10,
    children: [{
        id: "1_1",
        name: "小李子",
        type: 1,
        children: [{
            id: "1_1_1",
            name: "小啊子",
            type: 1,
            children: [{
                id: "1_1_1_1",
                name: "小啊33子",
                type: 1
            }]
        }]
    }]
}, {
    id: "1_2",
    name: "小王",
    type: 1
}, {
    id: "1_3",
    name: "小刘",
    type: 1
}, {
    id: "1_4",
    name: "小明",
    type: 1
}];

class ListView extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            userList: []
        };

        this.UserList();
    }

    async  UserList() {
        var resultData = await UserApi.UserList();
        console.log(resultData, "===========resultData=============");
        this.setState({
            userList: resultData || []
        });

    }

    TreeRender(arr, deepIndex) {
        var that = this;
        return arr.map(item => {

            var has_child = item['children'] && item.children.length > 0;

            return <>
                <div className="member_each" deepIndex={deepIndex} key={item.id} has_child={has_child}>
                    {
                        has_child && <div className="arrow_container">
                            <Icon type="right" />
                        </div>
                    }
                    <span>{item.name}</span>
                </div>
                {
                    has_child && that.TreeRender(item.children, deepIndex + 1)
                }
            </>

        })
    }



    render() {



        return (

            <div className="ListTreeView2">


                <div className="main_table">
                    <Table width={'100%'} className="member_table" dataSource={this.state.userList} size="middle" bordered
                        title={() => 'Header'}
                        footer={() => <Pagination defaultCurrent={1} total={50} />}
                        expandedRowRender={record => <p style={{ margin: 0 }}>地址: {record.address}</p>}
                    >
                        <Column title="uuid" dataIndex="uuid" key="uuid" />
                        <Column title="name" dataIndex="name" key="name" />
                        <Column title="age" dataIndex="age" key="age" />
                        <Column
                            title="sex"
                            key="sex"
                            render={(text, record) => (
                                <span>
                                    {record.sex == 0 ? '女' : '男'}
                                </span>
                            )}
                        />
                        <Column
                            width={150}
                            title="sex"
                            key="sex"
                            render={(text, record) => (
                                <span>
                                    <a>删除</a>
                                    <Divider type="vertical" />
                                    <a>编辑</a>
                                </span>
                            )}
                        />
                    </Table>
                </div>

                <div className="side_tree">


                    {
                        this.TreeRender(tree, 0)
                    }


                </div>

            </div>


        );
    }
}
export default ListView;